<template>
	<div>
		<el-card>
			<el-breadcrumb separator="/">
				<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
				<el-breadcrumb-item>商品管理</el-breadcrumb-item>
				<el-breadcrumb-item>商品问答</el-breadcrumb-item>
			</el-breadcrumb>
			<el-row>
				<el-col :span="2">
					<el-button class="btn_top" @click="answerStatus(0)" size="small">提问管理</el-button>
				</el-col>
				<el-col :span="2">
					<el-button class="btn_top" @click="answerStatus(1)" size="small">回答管理</el-button>
				</el-col>
				<el-col :span="2" v-if="answer_status != 1">
					<el-select class="btn_top1" v-model="product_id" @change="selectProduct" size="small"
						placeholder="请选择要查看的商品" filterable>
						<el-option v-for="item in productList" :key="item.productId" :label="item.productName"
							:value="item.productId">
						</el-option>
					</el-select>
				</el-col>
			</el-row>
			<div style="margin-top: 10px;">
				<el-button size="small" icon="el-icon-check" plain @click="updateAnswers(1)">通过</el-button>
				<el-button size="small" icon="el-icon-close" plain @click="updateAnswers(0)">驳回</el-button>
				<el-button size="small" icon="el-icon-delete" plain @click="updateAnswers(2)">删除</el-button>
				<el-button size="small" icon="el-icon-document-add" @click="addAnswers">问答导表</el-button>
			</div>

			<el-table :data="answerList" @selection-change="selectChange" border style="width: 100%;margin-top: 8px;"
				height="600" :header-cell-style="{ background: '#409EFF', color: '#FFF' }">
				<el-table-column type="selection"> </el-table-column>
				<el-table-column label="标识" prop="answerId" width="60"> </el-table-column>
				<el-table-column label="商品名称">
					<template slot-scope="scope">
						{{ scope.row.productId | productNameFilter }}
					</template>
				</el-table-column>
				<el-table-column prop="userId" label="用户ID" width="100">
				</el-table-column>
				<el-table-column label="审核状态">
					<template slot-scope="scope">
						<el-tag type="danger" v-if="scope.row.answerStatus == null">未审核</el-tag>
						<el-tag type="danger" v-else-if="scope.row.answerStatus == '0'">已驳回</el-tag>
						<el-tag v-else-if="scope.row.answerStatus == '1'">已审核</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="answerContent" label="问题">
				</el-table-column>
				<el-table-column prop="answerNum" label="回答数" v-if="answer_status == 0">
				</el-table-column>
				<el-table-column prop="replyname" label="回答" v-if="answer_status != 0">
				</el-table-column>
				<el-table-column prop="answerDate" label="时间">
				</el-table-column>
			</el-table>
			<div class="pagination-control">
				<el-pagination :page-sizes="[20, 50, 80, 100]" :page-size="pageSize"
					layout="total, sizes, prev, pager, next, jumper" :total="totalCount" @size-change="sizeChange"
					@current-change="currentChange" :current-page="pageNumber">
				</el-pagination>
			</div>
		</el-card>
		<el-dialog title="商品问答导表" :visible.sync="addDialogVisible" width="30%">
			<el-form ref="formRef" :model="formData" class="send-dialog-form">
				<el-form-item prop="file" ref="uploadRef" label="导表">
					<el-upload class="upload-demo" action="aa" :on-remove="fileRemove" :on-change="fileChange"
						:auto-upload="false" name="file" accept=".xls" :limit="1" ref="addFile">
						<el-button size="small" type="primary">点击上传</el-button>
						<div slot="tip" class="el-upload__tip">
							*请上传xls文件
						</div>
					</el-upload>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="cancelBox">取消</el-button>
				<el-button type="primary" @click="submitComment">确 定</el-button>
			</span>
		</el-dialog>

	</div>
</template>

<script>

let that
import {
	getAnswer,
	listProduct,
	updateAnswer,
	deleteProductAnswer,
	// zhidingComment,
	importAnswer
} from "../../network/product";


export default {
	data() {
		return {
			activeName: '',
			product_id: '',
			productList: "",
			answer_status: 0,
			answerList: [],
			pageNumber: 1,
			pageSize: 20,
			totalCount: 0,
			checkList: [],
			addDialogVisible: false,
			formData: {
				cover: '',
			},
		}
	},
	components: {

	},
	methods: {
		cancelBox() {
			this.addDialogVisible = false;
			this.$refs.formRef.resetFields();
			this.$refs.addFile.clearFiles();
			this.formData = {
				cover: '',
			}
		},
		fileRemove(file, fileList) {
			this.$refs.addFile.clearFiles();
			this.formData = {
				cover: '',
			}
		},
		fileChange(file, fileList) {
			this.formData.cover = file.raw;
		},
		submitComment() {
			let fd = new FormData();
			fd.append("file", this.formData.cover);
			importAnswer(fd).then(res => {
				console.log(res);
				if (res.flag) {
					this.getAnswerList();
					this.cancelBox();
					this.$message.success('上传成功')
				} else {
					console.log(res);
					this.$message.success("上传失败");
				}
			});
		},
		addAnswers() {
			this.addDialogVisible = true;
		},
		getProductList() {
			listProduct({
				shopId: '0',
				size: 500,
				page: 1,
				productName: '',
				productStatus: '-1'
			}).then(res => {
				console.log(res);
				if (res.flag) {
					this.productList = res.data.list;
					if (res.data.list.length != 0) {
						this.product_id = res.data.list[0].productId
					}
					this.getAnswerList()
				}
			})
		},
		answerStatus(status) {
			if (this.answer_status != status) {
				this.pageNumber = 1;
				this.totalCount = 0;
				this.loading = true;
				this.answer_status = status;
				this.getAnswerList();
			}
		},
		selectProduct(val) {
			this.pageNumber = 1;
			this.totalCount = 0;
			this.product_id = val;
			this.getAnswerList();
		},
		getAnswerList() {

			getAnswer({
				productId: this.product_id == 0 ? '' : this.product_id,
				page: this.pageNumber,
				size: this.pageSize,
				parentId: this.answer_status
			})
				.then(res => {
					if (res.flag) {
						this.answerList = res.data.list;
						this.totalCount = res.data.total;
					}
				})
				.catch(err => {
					console.log(err);
				});

		},
		//每页N条发生改变
		sizeChange(val) {
			this.pageSize = val;
			this.loading = true;
			this.getAnswerList();
		},
		// 页码发生改变
		currentChange(val) {
			this.pageNumber = val;
			this.loading = true;
			this.getAnswerList();
		},
		selectChange(val) {
			this.checkList = val;
		},
		updateAnswers(status) {
			if (this.checkList.length === 0) {
				return this.$message.warning("请勾选要审核的数据");
			}
			let answer_id = "";
			for (let i = 0; i < this.checkList.length; i++) {
				answer_id += this.checkList[i].answerId + ",";
			}


			if (status == 2) {
				deleteProductAnswer({
					ids: answer_id,
				})
					.then(res => {
						console.log(res);
						if (res.flag) {
							this.getAnswerList();
							this.$message.success("删除成功");
						} else {
							this.$message.error("删除失败");
						}
					})
					.catch(error => {
						console.log(error);
					});
			} else {
				updateAnswer({
					ids: answer_id,
					status: status,
				})
					.then(res => {
						console.log(res);
						if (res.flag) {
							this.getAnswerList();
							this.$message.success("操作成功");
						} else {
							this.$message.error("操作失败");
						}
					})
					.catch(error => {
						console.log(error);
					});
			}

		},

	},
	created() {
		this.getProductList();
		that = this
	},
	filters: {
		productNameFilter(val) {
			console.log(val);
			var name = ''
			that.productList.forEach(ele => {
				if (ele.productId == val) {
					name = ele.productName
				}
			})
			return name
		}
	},
};
</script>

<style scoped>
.btn_top {
	width: 130px;
}

.btn_top1 {
	width: 300px;
}

.control {
	position: relative;
	min-height: 700px;
}

.title-control {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12px;
}

.tag-tip {
	font-size: 12px;
	color: #999;
}
</style>
